<template>
  <div class="achievement" v-cloak>
    <div class="bg_color"></div>
    <div class="about-us" v-show="show">
      <div class="content" style="padding-top:10px;">
        <div class="row">
          <img src="../assets/image/login_sjh.png"/>
          <input type="number" placeholder="请输入手机号" v-model="info.mobile" v-on:input="bindiput">
        </div>
        <div class="row">
          <img src="../assets/image/login_yzm.png"/>
          <input type="number" placeholder="请输入验证码" v-model="info.code">
          <span class="yzmBtn" @click="send_code">{{time==0 ?'获取验证码' : time+'s后重试'}}</span>
        </div>
        <div class="row" v-if="nowrolesta">
          <img src="../assets/image/login_mm.png"/>
          <input type="password" placeholder="请输入密码" v-model="info.password">
        </div>
        <div class="row" v-if="nowrolesta">
          <img src="../assets/image/login_zcsr.png"/>
          <input type="password" placeholder="请再次输入密码" v-model="info.password_repeat">
        </div>
        <div class="radioGroup" v-if="nowrolesta">
          <div class="radio">
            <input id="label1" type="radio" name="isChoice" value="用户" v-model="info.role">
            <label for="label1">用户</label>
          </div>
          <div class="radio">
            <input id="label2" type="radio" name="isChoice" value="快递员"  v-model="info.role">
            <label for="label2">快递员</label>
          </div>
          <div class="radio" style="left: 68%;">
            <input id="label3" type="radio" name="isChoice" value="员工"  v-model="info.role">
            <label for="label3">员工</label>
          </div>
        </div>
        <input type="text" hidden>
        <div class="btn" @click="binding">绑 定</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'BindMobile',
    data () {
      return {
        show: true,
        info: {
          role: '用户',
          source: 'weixin',
          mobile: '',
          password: '',
          password_repeat: '',
          code: '',
          nickname: '',
          headimg: '',
          openid: '',
          unionid: ''
        },
        time: 0,
        nowrolesta: false
      }
    },
    methods: {
      bindiput: function () {
        if (this.info.mobile === '') {
          this.nowrolesta = false
          this.info.role = '用户'
        }
      },
      setmode: function (name, content) {
        let mode = this.$chaos.config('mode')
        if (mode === 'website') {
          sessionStorage[name] = JSON.stringify(content)
        } else {
          localStorage[name] = JSON.stringify(content)
        }
      },
      is_mobile: function (mobile) {
        return /^1[34578]\d{9}$/.test(mobile)
      },
      binding: function () {
        var thisObj = this
        if (thisObj.info.mobile === '') {
          thisObj.$vux.toast.show({
            text: '请输入手机号',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        if (!thisObj.is_mobile(thisObj.info.mobile)) {
          thisObj.$vux.toast.show({
            text: '请输入正确的手机号',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        if (thisObj.info.code === '') {
          thisObj.$vux.toast.show({
            text: '请输入验证码',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        if (thisObj.nowrolesta) {
          if (thisObj.info.password === '') {
            thisObj.$vux.toast.show({
              text: '请输入密码',
              type: 'text',
              width: '180px',
              position: 'bottom'
            })
            return false
          }
          if (thisObj.info.password.length < 6) {
            thisObj.$vux.toast.show({
              text: '密码长度低于6位',
              type: 'text',
              width: '180px',
              position: 'bottom'
            })
            return false
          }
          if (thisObj.info.password_repeat === '') {
            thisObj.$vux.toast.show({
              text: '请再次输入密码',
              type: 'text',
              width: '180px',
              position: 'bottom'
            })
            return false
          }
          if (thisObj.info.password_repeat !== thisObj.info.password) {
            thisObj.$vux.toast.show({
              text: '两次密码输入不一致',
              type: 'text',
              width: '180px',
              position: 'bottom'
            })
            return false
          }
        }
        thisObj.submitAjax()
      },
      submitAjax: function () {
        let thisObj = this
        thisObj.$chaos.ajax({
          data: thisObj.info,
          slient: true,
          userinfo: false,
          url: 'Login/register',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.$chaos.setUserInfo(res.result.access_token)
              thisObj.$vux.toast.show({
                text: '登录成功',
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
              setTimeout(function () {
                window.location.href = '#/PersonalCenter'
              }, 1000)
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      send_code: function () {
        var thisObj = this
        if (thisObj.time > 0) {
          return false
        }
        if (thisObj.info.mobile === '') {
          thisObj.$vux.toast.show({
            text: '请输入手机号',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        if (!thisObj.is_mobile(thisObj.info.mobile)) {
          thisObj.$vux.toast.show({
            text: '请输入正确的手机号',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        thisObj.$chaos.ajax({
          data: {
            mobile: thisObj.info.mobile
          },
          slient: true,
          userinfo: false,
          url: 'Code/sendBindingCode',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              if (res.result.now_role !== '') {
                thisObj.info.role = res.result.now_role
                thisObj.nowrolesta = false
              } else {
                thisObj.nowrolesta = true
              }
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
              thisObj.time = 60
              var timer = setInterval(function () {
                thisObj.time--
                if (thisObj.time === 0) {
                  clearInterval(timer)
                }
              }, 1000)
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      getmode: function (content) {
        let mode = this.$chaos.config('mode')
        if (mode === 'website' && sessionStorage[content]) {
          return JSON.parse(sessionStorage[content])
        } else if (mode === 'client' && localStorage[content]) {
          let content = JSON.parse(localStorage[content])
          if (content.expire_time * 1000 < new Date().getTime()) {
            localStorage[content] = null
            return false
          }
          return content
        } else {
          return false
        }
      },
      verify: function () {
        this.$chaos.setTitle('绑定手机号')
        this.$store.commit('headerShow', false)
        this.$store.commit('footerShow', false)
        this.info.openid = this.getmode('openids')
        this.info.nickname = this.getmode('nickname')
        this.info.headimg = this.getmode('headimgurl')
        this.info.unionid = this.getmode('unionid')
        this.setmode('openids', '')
        this.setmode('nickname', '')
        this.setmode('headimgurl', '')
        this.setmode('unionid', '')
      }
    },
    created: function () {
      this.verify()
    },
    mounted: function () {
      window.scrollTo(0, 2000)
    },
    destroyed: function () {
      this.$store.commit('headerLeft', {showBack: true, backText: ' '})
    },
    watch: {
      '$route': 'verify'
    }
  }
</script>
<style scoped>
  [v-cloak] {
    display: block;
  }
  body,
  html {
    background: #f9f9f9;
  }
  input{
    outline: none;
    background: none;
    border: 0px;
  }
  .bg_color{
    background-image: url("../assets/image/login_bg.png");
    background-size: 100% 100%;
  }
  .content .radioGroup .radio:nth-child(2) {
    left: 40%;
  }
  .content .row {
    position: relative;
    width: 80%;
    margin: 5px auto;
    border-bottom: 1px solid #eee;
  }
  .content .row > img {
    width: 16px;
    height: 16px;
    display: block;
    position: absolute;
    top: 12px;
    left: 2%;
  }
  .content .row > input {
    width: calc(96% - 25px);
    height: 40px;
    line-height: 40px;
    margin-left: calc(4% + 20px);
    color: #fff;
  }
  .content .row .yzmBtn {
    position: absolute;
    padding: 0 10px;
    top: 10px;
    right: 0;
    height: 20px;
    line-height: 20px;
    color: #fff;
    border-left: 1px solid #eee;
  }
  .content .radioGroup {
    padding: 10px 0 10px!important;
  }
  .content .radioGroup {
    height: 40px;
    position: relative;
    padding: 60px 0 10px;
  }
  .content .radioGroup .radio {
    position: absolute;
    height: 40px;
    line-height: 40px;
    left: 15%;
  }
  .content .radioGroup .radio > input[type="radio"] {
    outline: none;
    -webkit-appearance: none;
    border: 1px solid rgba(240,240,240,0.8);
    border-radius: 3px;
    height: 16px;
    width: 16px;
    margin-right: 5px;
    vertical-align: middle;
  }
  .content .radioGroup .radio > input[type="radio"]:checked{
    background: url(../assets/image/login_s_s.png) !important;
    background-size: 100% 100% !important;
    width:16px;
    height:16px;
    border:0;
  }
  .radio label {
    color: #fff;
    vertical-align: -2px;
  }
  .btn {
    width: 80%;
    height: 40px;
    line-height: 40px;
    border-radius: 17px;
    background: rgba(255, 211, 176, 0.5);
    color: #fff;
    text-align: center;
    margin: 40px auto 0;
    font-size: 16px;
    position: relative;
  }
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #fff;
  }
  input:-moz-placeholder, textarea:-moz-placeholder {
    color: #fff;
  }
  input::-moz-placeholder, textarea::-moz-placeholder {
    color: #fff;
  }
  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #fff;
  }
</style>
